<template>
    <div class="app-container">
        <div class="app-container__header"></div>
        <div class="app-container__body">
            <div class="app-container__body__left">
                <category-card />
            </div>
            <div class="app-container__body__right">
                <custom-list :searchRes="searchRes" :list="dataList" :columns="columns" :keyword="keyword">
                    <template #type="{ row, item }">
                        <div style="margin-bottom: 10px;">{{ item.label }}: {{ row[item.prop] }}</div>
                    </template>
                </custom-list>
                <div class="pagination">
                    <el-pagination 
                    v-model:current-page="page.pageIndex"
                    v-model:page-size="page.pageSizes" small background
                    layout="total, prev, pager, next, sizes" :page-sizes="[10, 10]" :total="total" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import CategoryCard from './components/category/index.vue'
import CustomList from './components/custom-list/index.vue'
const page = ref({
    pageIndex: 1,
    pageSizes: 10,
})
const state = reactive<{ dataList: any[], searchRes: string, total: number, keyword: string, columns: any[] }>({
    dataList: [],
    total: 0,
    keyword: '咖啡', // 搜索关键字
    searchRes: '为壑查询到 20 条 咖啡 相关结果', // 搜索结果
    columns: [
        {
            type: 'header',
            list: [
                { prop: 'id' },
                { prop: 'title' },
            ]
        },
        { type: 'tag', prop: 'tagList' },
        {
            type: 'category',
            list: [
                { prop: 'category', label: '所顾类目:' },
                { prop: 'category1', label: '所属章节:' }
            ]
        },
        {
            type: 'categorys',
            list: [
                { prop: 'unit', label: '单位:' },
                { prop: 're', label: '进口普涌税率:' },
                { prop: 'res', label: '最惠国进口税率:' },
            ]
        },
        { prop: 'type', label: '申报实例:', slot: 'type' },
        { type: 'tips', prop: 'tips', label: '所顾类目:' },
    ]
})
const { dataList, columns, keyword, searchRes, total } = toRefs(state)
function getList() {
    dataList.value = [
        {
            id: '12039030',
            title: 'title',
            tagList: ['qs', 'sqs'],
            category: 'category',
            category1: 'category1111111',
            unit: '千克',
            re: '50%',
            res: '8%',
            type: 'A级叶啡豆 阿网拉比卡如非,阿技比卡机啡示 A级制啡豆,阿纹比卡制啡,sssss阿拉比卡咖非豆,A级如非豆,阿拉比卡加啡 阿拉比。',
            tips: '第二焚 植物产品第二焚 '
        },
        {
            id: '12039030',
            title: 'title',
            tagList: ['qs', 'sqs'],
            category: 'category',
            category1: 'category1111111',
            unit: '千克',
            re: '50%',
            res: '8%',
            type: 'A级叶啡豆 阿网拉比卡如非,阿技比卡机啡示 A级制啡豆,阿纹比卡制啡,sssss阿拉比卡咖非豆,A级如非豆,阿拉比卡加啡 阿拉比。',
            tips: '第二焚 植物产品第二焚 '
        },
    ]
}
getList()
</script>
<style lang="scss" scoped>
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f7f7f7;

    &__header {
        height: 50px;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 3px 5px 0px rgba(0, 0, 0, .1);
    }

    &__body {
        flex: 1;
        display: flex;
        flex-direction: row;
        padding: 10px;

        &__left {
            background: #ffffff;
            width: 200px;
            height: 220px;
            border-radius: 3px;
            box-shadow: 0 0 5px 0px rgba(0, 0, 0, .1);
        }

        &__right {
            margin-left: 10px;
            flex: 1;
            overflow-x: hidden;
            background: #ffffff;
            min-height: 300px;
            border-radius: 3px;
            box-shadow: 0 0 5px 0px rgba(0, 0, 0, .1);
            position: relative;
            padding-bottom: 50px;
            .pagination {
                position: absolute;
                right: 10px;
                bottom: 10px;
            }
        }
    }


}
</style>